<template>
	<view class="page">
		<view class="me-tou">
			<view class="me_firstbox">
				<image src="../../static/images/head.png" mode="scaleToFill"></image>
				<view>
					<view class="dengji">{{userInfo.nickname}}</view>
					<view class="myuid">UID：{{userInfo.mobile}}</view>
				</view>
				<view class="shijian">
					{{ currentTime }}
				</view>
			</view>
			<view class="wallet business">
				<view class="whole_dox">
					<view class="whole">
						<view class="shoucang">
							<image src="../../static/images/shou.png" mode="scaleToFill"></image>
						</view>
						我的订单
					</view>
				</view>
				<view class="huser">
					<view class="inte_gral" v-for="(item,index) in gralList" :key="index" @click="orderClick(item)">
						<image class="uni-image" :src="item.src" :mode="item.mode"></image>
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="mmfang">
				<view class="biaoti_mm">买方</view>
				<view class="gn_mm">
					<view class="gn_a" v-for="(item,index) in buyerList" :key="index" @click="buyClick(item)">
						<view class="gn_tu">
							<image class="uni-image" :src="item.src" :mode="item.mode"></image>
						</view>
						<view class="gn_w">
							{{item.title}}
						</view>

					</view>
				</view>
			</view>
			<view class="mmfang">
				<view class="biaoti_mm">卖方</view>
				<view class="gn_mm">
					<view class="gn_a" v-for="(item,index) in sellerList" :key="index" @click="sellClick(item)">
						<view class="gn_tu">
							<image class="uni-image" :src="item.src" :mode="item.mode"></image>
						</view>
						<view class="gn_w">
							{{item.title}}
						</view>

					</view>
				</view>
			</view>
			<view class="me_thi_dox">
				<view class="whole_dox">
					<view class="whole"> 我的订单</view>
				</view>
				<view class="huerio">
					<view class="me_thi">
						<view class="disflex_conte" v-for="(item,index) in orderList" :key="index"
							@click="itemClick(item)">
							<image class="uni-image" :src="item.src" :mode="item.mode"></image>
							{{item.title}}
						</view>
					</view>
				</view>
			</view>
			<button class="exitbtn" @click="outLogin">退出登录</button>
			<view style="height: 50px;">

			</view>
		</view>
	</view>
</template>

<script>
	import {
		memberInfo,
		loginOut
	} from '@/api/user.js';
	export default {
		onShow() {
			this.userInfo = {}
			memberInfo().then(response => {
				this.userInfo = response.data;
				console.log(this.userInfo)
			});
		},
		data() {
			return {
				date: new Date(), // 初始化当前日期时间，
				gralList: [{
						mode: "scaleToFill",
						src: '../../static/images/dfk.png',
						title: "全部",
						type: "all"

					},
					{
						mode: "scaleToFill",
						src: '../../static/images/dfh.png',
						title: "待发货",
						type: "shipped",
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/dsh.png',
						title: "待收货",
						value: "received"
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/sh.png',
						title: "已完成",
						value: "finished"
					}
				],
				buyerList: [{
						mode: "scaleToFill",
						src: '../../static/images/cangku.png',
						title: "我的仓库",
						state: 4,
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/que-fu.png',
						title: "买入订单",
						state: 1,
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/que-fu.png',
						title: "待付款",
						state: 2,
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/wancheng.png',
						title: "已付款",
						state: 3,
					},
				],
				sellerList: [{
						mode: "scaleToFill",
						src: '../../static/images/cangku.png',
						title: "我的仓库",
						state: 0,
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/cangku.png',
						title: "委卖订单",
						state: 1,
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/que-fu.png',
						title: "待收款",
						state: 3,
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/wancheng.png',
						title: "已收款",
						state: 4,
					},
				],
				orderList: [{
						mode: "scaleToFill",
						src: '../../static/images/grzl.png',
						title: "个人资料",
						url: '/pages/user/account',

					},
					{
						mode: "scaleToFill",
						src: '../../static/images/qianbao.png',
						title: "我的钱包",
						url: '/pages/user/money'
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/zhanghu.png',
						title: "账户明细",
						url: '/pages/bonus/coin_record'
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/tub4.png',
						title: "收款方式",
						url: '/pages/bonus/bankcard'
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/shouhuodizhi.png',
						title: "收货地址",
						url: '/pages/bonus/address'
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/gonggao.png',
						title: "公告中心",
						url: '/pages/art/list'
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/smrz.png',
						title: "实名认证",
						url: '/pages/bonus/smrz'
					},
					{
						mode: "scaleToFill",
						src: '../../static/images/youhuiquan.png',
						title: "我的优惠卷",
						url: '/pages/bonus/youhuiquan'
					}, {
						mode: "scaleToFill",
						src: '../../static/images/queren_dk.png',
						title: "团队订单",
						url: '/pages/bonus/teamorder'
					},
				],
				userInfo: {}

			}

		},
		mounted() {
			memberInfo().then(response => {
				console.log('ssssss');
				this.userInfo = response.data;
				console.log(this.userInfo)
			});
			setInterval(() => {
				this.date = new Date(); // 更新日期时间
			}, 1000);
			
		},
		computed: {
			// 计算属性返回格式化的时间字符串
			currentTime() {
				return this.FormatTime(this.date);
			}
		},
		methods: {
			
			FormatTime(datea) {
				//设置返回显示的日期时间格式
				var date = datea;
				var year = this.format2Digit(date.getFullYear());
				var month = this.format2Digit(date.getMonth() + 1);
				var day = this.format2Digit(date.getDate());
				var hour = this.format2Digit(date.getHours());
				var minute = this.format2Digit(date.getMinutes());
				var second = this.format2Digit(date.getSeconds());
				var weekday = date.getDay();
				var weeks = new Array(
					"星期日",
					"星期一",
					"星期二",
					"星期三",
					"星期四",
					"星期五",
					"星期六"
				);
				var week = weeks[weekday];
				//这里设置你要显示的格式
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},

			format2Digit(n) {
				//判断时间是否需要加0
				if (n < 10) {
					return "0" + n;
				} else {
					return n;
				}
			},
			itemClick(item) {
				uni.navigateTo({
					url: item.url
				})
			},
			buyClick(item) {
				uni.navigateTo({
					url: '/pages/warehouse/buyer?state=' + item.state
				});
			},
			sellClick(item) {
				uni.navigateTo({
					url: '/pages/warehouse/seller?state=' + item.state
				});
			},
			orderClick(item) {
				uni.navigateTo({
					url: '/pages/order/order?type=' + item.type
				});
			},
			outLogin() {
				uni.showModal({
					title: "退出登录",
					content: "确定退出登录吗？",
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: "#007AFF",
					success: function(res) {
						if (res.confirm) {
							loginOut().then(res => {
								if (res.code == 1) {
									
									uni.removeStorageSync('token');
									uni.removeStorageSync('USER');
									uni.removeStorageSync('userInfo');
									// uni.removeStorage('userInfo');
									uni.removeStorageSync('userinfo');
									uni.removeStorageSync('IDS');
									uni.removeStorageSync('bankData')
									uni.navigateTo({
										url: '/pages/user/login'
									});
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				})
				
			},

		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
	}

	.me-tou {
		width: 100%;
		height: 213px;
		background: linear-gradient(#d66c6b, #ed6266);
		margin-bottom: 106px;
		border-radius: 0 0 32px 32px;
	}

	.me_firstbox {
		width: 90%;
		margin: auto;
		padding: 10px;
		border-radius: 10px;
		color: #fff;
		text-align: center;
	}

	.me_firstbox image {
		width: 64px;
		height: 64px;
		border-radius: 53px;
		margin-bottom: 5px;
	}

	.me_firstbox view {
		font-size: 14px;
	}

	.dengji {
		font-size: 17px !important;
		font-weight: 700;
		margin-bottom: 5px;
	}

	.wallet {
		color: #333;
		background-color: #fff;
		box-shadow: 0 2px 10px #ccc;
		margin: 16px 10px;
		border-radius: 8px;
		font-size: 14px;
	}

	.whole_dox {
		padding: 10px;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.whole {
		height: 16px;
		display: flex;
		font-weight: 700;
		align-items: center;
		color: #000;
		font-size: 18px;
	}

	.shoucang {
		margin-right: 5px;
	}

	.shoucang image {
		width: 25px;
		height: 25px;
	}

	.huser {
		display: flex;
	}

	.inte_gral {
		width: 25%;
		text-align: center;
		display: flex;
		flex-direction: column;
		color: #999;
		padding: 10px 0 0 0;
		align-items: center;
	}

	.inte_gral image {
		width: 42px;
		height: 42px;
	}

	.mmfang {
		width: 92%;
		border-radius: 10px;
		padding: 5px;
		margin: 10px;
		margin-bottom: 21px;
		box-shadow: 0 4px 10px #ccc;
		background: linear-gradient(135deg, #d66c6b, #ed6266);
	}

	.biaoti_mm {
		margin: auto;
		width: 94%;
		padding: 5px;
		color: #fff;
		font-size: 17px;
		font-weight: 700;
		border-bottom: #fff solid 1px;
	}

	.gn_mm {
		width: 95%;
		padding: 8px;
		margin: auto;
		display: flex;
		justify-content: space-between;
	}

	.gn_a {
		padding: 5px;
		text-align: center;
	}

	.gn_tu image {
		width: 42px;
		height: 42px;
	}

	.gn_w {
		font-size: 14px;
		color: #fff;
	}

	.me_thi_dox {
		box-shadow: 0 2px 10px #ccc;
		width: 95%;
		margin: 10px auto;
		margin-top: 53px;
		margin-bottom: 42px;
		border-radius: 10px;
		background-color: #fff;
	}

	.whole_dox {
		padding: 10px;
		padding-bottom: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.whole {
		height: 16px;
		display: flex;
		font-weight: 700;
		align-items: center;
		color: #000;
		font-size: 18px;
	}

	.huerio {
		padding: 10px;
	}

	.me_thi {
		align-items: center;
		flex-wrap: wrap;
		display: flex;
		font-size: 14px;
	}

	.disflex_conte {
		width: 33%;
		text-align: center;
		display: flex;
		flex-direction: column;
		color: #999;
		padding-top: 10px;
		padding-bottom: 10px;
		align-items: center;
	}

	.me_thi image {
		width: 42px;
		height: 42px;
	}

	.exitbtn {
		width: 80%;
		border-radius: 50px;
		background: linear-gradient(135deg, #d66c6b, #ed6266);
		font-size: 14px;
		margin: 16px auto;
		color: #fff;
		padding: 3px 0;
	}

	.me_firstbox {
		width: 90%;
		margin: auto;
		padding: 10px;
		border-radius: 10px;
		color: #fff;
		text-align: center;
	}

	.wallet {
		color: #333;
		background-color: #fff;
		box-shadow: 0 2px 10px #ccc;
		margin: 16px 10px;
		border-radius: 8px;
		font-size: 14px;
	}

	.business {
		margin: 10px;
		padding-bottom: 10px;
	}
</style>